<template>
  <div class="article-manager">
    <div class="i-layout-page-header header_top">
      <div class="i-layout-page-header fl_header">
        <router-link :to="{ path: '/onsite/service_list' }">
          <el-button icon="ios-arrow-back" size="small" type="text">返回</el-button>
        </router-link>
        <el-divider direction="vertical" />
        <span
          class="ivu-page-header-title mr20"
          style="padding: 0"
          v-text="header_title ? '修改服务项目' : '添加服务项目'"
        ></span>
      </div>
    </div>
    <el-card :bordered="false" shadow="never" class="ivu-mt">
      <el-form
        class="form"
        ref="data"
        :model="data"
        :rules="rule"
        label-width="140px"
        label-position="right"
        @submit.native.prevent
      >
        <el-tabs v-model="currentTab" @on-click="onhangeTab" style="margin-bottom: 10px">
          <el-tab-pane
            v-for="(item, index) in headTab"
            :key="index"
            :label="item.tit"
            :name="item.name"
          ></el-tab-pane>
        </el-tabs>
        <div v-show="currentTab == 1">
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="服务类型：" props="is_virtual">
                <div
                  class="virtual"
                  :class="data.itemType == item.id ? 'virtual_boder' : 'virtual_boder2'"
                  v-for="(item, index) in virtual"
                  :key="index"
                  @click="virtualbtn(item.id, true)"
                >
                  <div class="virtual_top">{{ item.tit }}</div>
                  <div v-if="data.itemType == item.id" class="virtual_san"></div>
                  <div v-if="data.itemType == item.id" class="virtual_dui">✓</div>
                </div>
                <div class="tip" style="float:left; width:100vw">保存后，服务类型无法保存</div>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="data.itemType == 2">
              <el-form-item label="使用次数：" label-for="vips_times">
                <el-input type="number" v-model="data.vipTimes" :min="1" />
              </el-form-item>
            </el-col>
            <el-col :span="24" class="mr50">
              <el-form-item label="服务名称：" prop="title" label-for="title">
                <el-input
                  v-model="data.title"
                  placeholder="请输入服务名称"
                  element-id="title"
                  style="width: 90%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24" class="mr50">
              <el-form-item label="服务分类:" label-for="cateId" prop="cateId">
                <div class="perW90">
                  <el-select v-model="data.cateId" filterable>
                    <el-option
                      v-for="(item,index) in cateList"
                      :disabled="item.pid==0"
                      :value="item.id"
                      :key="index"
                      :label="item.ptitle+'>'+item.title"
                    ></el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" type="flex">
            <el-col :span="9" class="mr50">
              <el-form-item label="简介:" prop="shortTitle">
                <el-input
                  v-model="data.shortTitle"
                  type="textarea"
                  placeholder="请输入简介"
                  style="width: 200%"
                  :rows="8"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" type="flex">
            <el-col v-bind="grid" class="mr50">
              <el-form-item label="封面图片：" prop="thumb">
                <div class="picBox" @click="modalPicTap(false,'thumb')">
                  <div class="pictrue" v-if="data.thumb">
                    <img :src="data.thumb" />
                  </div>
                  <div class="upLoad acea-row row-center-wrapper" v-else>
                    <i class="el-icon-camera cameraIconfont" />
                  </div>
                </div>
                <div class="tip">建议尺寸：375 x 300 px</div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="24" class="mr50">
              <el-form-item label="顶部轮播图" prop="images">
                <div class="acea-row">
                  <div
                    class="pictrue"
                    v-for="(item, index) in data.bannerImgsArray"
                    :key="index"
                    draggable="true"
                  >
                    <img v-lazy="item" />
                    <i
                      class="el-icon-error btndel"
                      @click="handleRemove(index,'bannerImgsArray')"
                    />
                  </div>
                  <div
                    v-if="data.bannerImgsArray.length < 5"
                    class="upLoad acea-row row-center-wrapper"
                    @click="modalPicTap(true,'bannerImgsArray')"
                  >
                    <i class="el-icon-camera cameraIconfont" />
                  </div>
                </div>
                <div class="tip">建议尺寸：375 x 300 px（最多上传5张）</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" type="flex">
            <el-col v-bind="grid" class="mr50">
              <el-form-item label="服务标签:" label-for="cateId" prop="serviceLabelArray">
                <div class="perW90">
                  <el-select v-model="data.serviceLabelArray" filterable multiple>
                    <el-option
                      v-for="(item,index) in serviceLabel"
                      :value="item.content"
                      :key="index"
                      :label="item.content"
                    ></el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24" type="flex">
            <el-col :span="8">
              <el-form-item label="排序：" label-for="sort">
                <el-input-number v-model="data.sort" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="单位：" label-for="unitName">
                <el-input
                  v-model="data.unitName"
                  placeholder="请输入单位"
                  element-id="title"
                  style="width: 90%"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8" v-if="data.itemType == 2">
              <el-form-item label="有效天数" label-for="vipDays">
                <el-input-number v-model="data.vipDays" :min="1" />
                <div style="color:gray">只能预约在有效时间内</div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="每天最大接单量：" label-for="maxAccept">
                <el-input-number v-model="data.maxAccept" :min="1" />
                <div style="color:gray">只能预约在有效时间内</div>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!-- 上门规格 -->
        <div v-show="currentTab == 2">
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="批量设置：" class="labeltop" prop="relate">
                <el-table :data="oneFormBatch" border>
                  <el-table-column label="规格名称" min-width="120">
                    <template slot-scope="{ row, index }">
                      <el-input
                        style="width: 120px"
                        v-model="row.title"
                        placeholder="请输入名称"
                        class="priceBox"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="服务酬劳价" min-width="120">
                    <template slot-scope="{ row, index }">
                      <el-input-number
                        style="width: 120px"
                        v-model="row.costPrice"
                        :min="0"
                        :max="99999999"
                        class="priceBox"
                      ></el-input-number>
                    </template>
                  </el-table-column>
                  <el-table-column label="服务单价" min-width="120">
                    <template slot-scope="{ row, index }">
                      <el-input-number
                        style="width: 120px"
                        v-model="row.unitPrice"
                        :min="0"
                        :max="99999999"
                        class="priceBox"
                      ></el-input-number>
                    </template>
                  </el-table-column>
                  <el-table-column label="单位名称" min-width="120">
                    <template slot-scope="{ row, index }">
                      <el-input
                        style="width: 120px"
                        v-model="row.unitName"
                        placeholder="请输入单位"
                        class="priceBox"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="备注" min-width="120">
                    <template slot-scope="{ row, index }">
                      <el-input
                        style="width: 120px"
                        v-model="row.mark"
                        placeholder="请输入备注"
                        class="priceBox"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" min-width="120">
                    <template slot-scope="scope">
                      <a @click="batchAdd">添加</a>
                      <el-divider direction="vertical" />
                      <a @click="batchDel(scope.$index)">删除</a>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!-- 商品设置 -->
        <div v-show="currentTab == 3">
          <div class="goodsTitle acea-row">
            <div class="title">服务内容</div>
          </div>
          <el-form-item label="文章内容：" prop="content" v-if="data.companyId == 0">
            <Tinymce v-model.trim="data.content"></Tinymce>
          </el-form-item>
          <template v-if="data.companyId > 0">
            <el-row>
              <el-col :span="12">
                <el-form-item label="文章内容：" prop="content">
                  <el-input
                    type="textarea"
                    style="resize:none"
                    v-model="data.content"
                    placeholder="请输入文章内容"
                    :rows="10"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="图片内容：" prop="thumb">
                  <div class="picBox" @click="modalPicTap(false,'contentImg')">
                    <div class="pictrue" v-if="data.contentImg">
                      <img :src="data.contentImg" />
                    </div>
                    <div class="upLoad acea-row row-center-wrapper" v-else>
                      <i class="el-icon-camera cameraIconfont" />
                    </div>
                  </div>
                  <div style="color: #808080">门店服务项目使用图片和内容的形式</div>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </div>
        <!-- 其他设置 -->
        <div v-show="currentTab == 4">
          <el-row :gutter="24" type="flex">
            <el-col :span="8">
              <el-form-item label="是否需要选择服务人员：" label-for="isServiceStaff">
                <el-radio-group
                  v-model="data.isServiceStaff"
                  element-id="isServiceStaff"
                  @input="RadioChange"
                >
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0" >否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否显示：" label-for="status">
                <el-radio-group v-model="data.status" element-id="status">
                  <el-radio :label="1" class="radio">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24" type="flex">
            <el-col :span="8">
              <el-form-item label="是否推荐：" label-for="isRecommend">
                <el-radio-group
                  v-model="data.isRecommend"
                  element-id="isRecommend"
                >
                  <el-radio :label="1" class="radio">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否年度热销：" label-for="hotSales">
                <el-radio-group v-model="data.hotSales" element-id="hotSales" >
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0" class="radio">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            
          </el-row>
          <el-row :gutter="24" type="flex">
            <el-col :span="8" >
              <el-form-item label="模板编号" prop="templeteNo" label-for="templeteNo">
                <el-input
                  v-model="data.templeteNo"
                  placeholder="模板编号"
                  element-id="templeteNo"
                  style="width: 90%"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-button class="submission" v-if="currentTab !== '1'" @click="upTab">上一步</el-button>
        <!-- 普通服务 -->
        <el-button type="primary" class="submission" v-if="currentTab !== '4' " @click="downTab">下一步</el-button>
        <el-button type="primary" class="submission" @click="onsubmit('data')">提交</el-button>
      </el-form>
    </el-card>
  </div>
</template>
  
  <script>
import Tinymce from '@/components/Tinymce/index';
import { ItemSaveApi, getItemDetailApi, serviceLabelApi, delItemSpecApi, getSecondCateListApi, } from '@/api/onsite';
export default {
  name: 'add_item',
  components: {
    Tinymce,
  },
  data() {
    const validateUpload2 = (rule, value, callback) => {
      if (!this.data.cateId) {
        callback(new Error('请选择分类'));
      } else {
        callback();
      }
    };
    const validateUpload1 = (rule, value, callback) => {
      if (!this.data.title) {
        callback(new Error('请填写服务名称'));
      } else {
        callback();
      }
    };
    var checkServiceLabel = (rule, value, callback) => {
      if (value == []) {
        return callback(new Error('请选择标签'));
      }
      callback();
    };
    var checkContent = (rule, value, callback) => {
      if (this.contents == '') {
        return callback(new Error('请输入文章内容'));
      }
      callback();
    };
    var checkRelate = (rule, value, callback) => {
      if (this.oneFormBatch.length == 0) {
        return callback(new Error('请添加规格'));
      }
      callback();
    };

    var checkThumb = (rule ,value ,callback) => {
      if(!value){
        return callback(new Error('请上传封面图片'))
      }
      callback()
    }
    return {
      isChoice: '单选',
      grid: {
        xl: 8,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24,
      },
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
      loading: false,
      header_title: '',
      videoIng: false, // 是否显示进度条；
      modalPic: false,
      cateList: [],
      currentTab: '1',
      headTab: [
        { tit: '基础信息', name: '1' },
        { tit: '规格', name: '2' },
        { tit: '商品详情', name: '3' },
        { tit: '其他设置', name: '4' },
      ],
      virtual: [
        {
          id: 1,
          tit: '普通服务',
        },
        {
          id: 2,
          tit: '次卡服务',
        },
      ],
      data: {
        id: '',
        cateId: '',
        title: '',
        shortTitle: '',
        content: '',
        itemType: '',
        isRecommend: 1,
        companyId: 0,
        sort: '',
        status: 1,
        thumb: '',
        isPic: 0,
        unitName: '',
        itemType: 1, //项目类型
        vipTimes: 1, //次卡使用次数
        vipDays: 1, //使用次数
        // is_fare: 0,
        isServiceStaff: 0,
        hotSales: 0,
        serviceLabelArray: [],
        bannerImgsArray: [],
        maxAccept: 1,
        contentImg: '',
        templeteNo:''
      },
      picIndex: '',
      oneFormBatch: [
        {
          title: '',
          costPrice: '',
          unitPrice: '',
          unitName: '',
        },
      ],
      video_open: false,
      selectVideo: 0,
      content: '',
      progress: 0, // 进度条默认0
      uploadData: {}, // 上传参数
      header: {},
      rule: {
        cateId: [{ required: true, validator: validateUpload2, trigger: 'change', type: 'number' }],
        title: [{ required: true, validator: validateUpload1, trigger: 'change', type: 'number' }],
        thumb:[{required: true, validator:checkThumb, trigger:'change'}],
        serviceLabelArray: [{ required: true, validator: checkServiceLabel, trigger: 'change', type: 'array' }],
        content: [{ required: true, validator: checkContent, trigger: 'change', type: 'string' }],
        relate: [{ required: true, validator: checkRelate, trigger: 'change', type: 'array' }],
      },
      serviceLabel: [],
    };
  },
  created() {
    this.header_title = this.$route.query.id ? this.$route.query.id : 0;
    if (this.header_title) {
      this.getDetails(this.header_title);
    } else {
      console.log('添加');
    }
    this.getCategory();
  },
  watch: {
    $route(to, from) {
      this.header_title = parseInt(this.$route.query.id);
      if (this.header_title) {
        this.getDetails(this.header_title);
      } else {
        this.reset();
      }
    },
    content(val) {
      console.log(val, 'content');
    },
  },
  mounted() {
    if (this.$route.query.type) {
      this.modals = true;
      this.type = this.$route.query.type;
    } else {
      this.type = 0;
    }
    this.getServiceLabel();
  },
  methods: {

    //获取服务项目标签
    getServiceLabel() {
      serviceLabelApi().then((res) => {
        this.serviceLabel = res;
      });
    },
    // 选择图片
    modalPicTap(multiple, index) {
      const _this = this;
      if (multiple) {
        this.$modalUpload(
          function (img) {
            if (!img) return;
            if (img.length > 10) return this.$message.warning('最多选择8张图片！');
            if (img.length + _this.data[index].length > 10) return this.$message.warning('最多选择8张图片！');
            img.map((item) => {
              _this.data[index].push(item.sattDir);
            });
          },
          multiple,
          'store',
        );
      } else {
        this.$modalUpload(
          function (img) {
            if (!img) return;
            _this.data[index] = img[0].sattDir;
          },
          multiple,
          'store',
        );
      }
    },
    handleRemove(i, index) {
      // this.formItem.thumb.splice(i, 1);
      if (index != 'thumb') {
        this.data[index].splice(i, 1);
      } else {
        this.data[index] = '';
      }
    },
    getCategory() {
      getSecondCateListApi()
        .then(async (res) => {
          this.cateList = res;
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },

    // 提交数据
    onsubmit(name) {

      if (this.data.title == '') {
        this.$message.error('请输入服务名称');
        return;
      }
      if (this.data.cateId == '') {
        this.$message.error('请选择服务分类');
        return;
      }
      if (this.data.shortTitle == '') {
        this.$message.error('请输入服务简介');
        return;
      }
      if (this.data.content == '') {
        this.$message.error('请输入服务文章');
        return;
      }
      if (this.oneFormBatch.length == 0) {
        this.$message.error('请添加规格');
        return;
      }
      for (let index = 0; index < this.oneFormBatch.length; index++) {
        if (this.oneFormBatch[index].title == '') {
          return this.$message.error('请输入规格名称');
        }
      }
      // this.oneFormBatch.forEach(element => {
      //   if(element.title == ''){
      //     temp = true
      //   }
      // });
      // if(temp){
      // }
      this.data.relate = this.oneFormBatch;

      this.$refs['data'].validate((valid) => {
        if (valid) {
          ItemSaveApi(this.data)
            .then(async (res) => {
              this.$message.success('操作成功');
              setTimeout(() => {
                this.$router.push({ path: '/onsite/service_list' });
              }, 500);
            })
            .catch((res) => {
              this.$message.error('操作失败');
            });
        }
      });
      // return true;
    },
    RadioChange(e) {console.log(e)},
    reset() {
      this.data.id = '';
      this.data.cateId = '';
      this.data.title = '';
      this.data.shortTitle = '';
      this.data.content = '';
      this.data.itemType = '';
      this.data.isRecommend = 1;
      this.data.price = '';
      this.data.sort = '';
      this.data.status = 1;
      this.data.thumb = '';
      // this.data.is_send_address = 0;
      this.data.isPic = 0;
      this.data.unitName = '';
      // this.data.is_fare = 0;
      this.data.isServiceStaff = 0;
      this.data.is_night = 0;
      this.data.hotSales = 0;
      this.data.serviceLabelArray = [];
      this.data.maxAccept = news.maxAccept;
      this.data.content_imgs = news.content_imgs;
    },
    // 文章详情
    getDetails(id) {
      getItemDetailApi(id)
        .then((res) => {
          let news = res;
          this.data = {
            id: news.id,
            cateId: news.cateId,
            title: news.title,
            shortTitle: news.shortTitle,
            content: news.content,
            itemType: news.itemType,
            isRecommend: news.isRecommend,
            price: news.price - 0,
            sort: news.sort - 0,
            status: news.status,
            thumb: news.thumb,
            // is_send_address: news.is_send_address,
            isPic: news.isPic,
            unitName: news.unitName,
            vipDays: news.vipDays,
            vipTimes: news.vipTimes,
            // is_fare: news.is_fare,
            isServiceStaff: news.isServiceStaff,
            hotSales: news.hotSales,
            serviceLabelArray: news.serviceLabelArray,
            maxAccept: news.maxAccept,
            companyId: news.companyId,
            contentImg: news.contentImg,
            bannerImgsArray: news.bannerImgsArray || [],
            status:news.status,
            templeteNo:news.templeteNo
          };
          this.virtualbtn(news.itemType, false);
          this.contents = news.content;
          if(res.relate.length > 0){
            this.oneFormBatch = res.relate;
          }
        })
        .catch((res) => {
          this.$message.error(res.msg);
        });
    },
    onhangeTab(name) {
      this.currentTab = name;
    },
    upTab() {
      this.currentTab = (Number(this.currentTab) - 1).toString();
    },
    // 下一页；
    downTab() {
      this.currentTab = (Number(this.currentTab) + 1).toString();
    },
    batchAdd() {
      this.oneFormBatch.push({
        title: '',
        costPrice: 0,
        unitPrice: 0,
        unitName: '',
      });
    },
    batchDel(index) {
      let spec = this.oneFormBatch[index];
      if (spec.id) {
        //删除规格
        delItemSpecApi(spec.id)
          .then((res) => {
            this.$message.success('操作成功');
          })
      }
      this.oneFormBatch.splice(index, 1);
    },
    // 类型选择/填入内容判断
    virtualbtn(index, temp) {
      if (this.data.id && temp) return this.$message.warning('已添加过的项目，无法进行类别修改');
      this.data.itemType = index;
      this.headTab = [
        { tit: '基础信息', name: '1' },
        { tit: '规格', name: '2' },
        { tit: '商品详情', name: '3' },
        { tit: '其他设置', name: '4' },
      ];
      // switch (index){
      //   case 1:
      //     this.data.itemType = 1
      //     this.headTab = [
      //       { tit: '基础信息', name: '1' },
      //       { tit: '规格', name: '2' },
      //       { tit: '商品详情', name: '3' },
      //       { tit: '其他设置', name: '4' },
      //     ];
      //     break;
      //   case 2:
      //     this.data.itemType = 2
      //     this.headTab = [
      //       { tit: '基础信息', name: '1' },
      //       { tit: '规格', name: '2' },
      //       { tit: '商品详情', name: '3' },
      //     ];
      //   break;
      // }
    },
  },
};
</script>
  
  <style scoped>
.ivu-form-item-content {
  line-height: unset !important;
}
.picBox {
  display: inline-block;
  cursor: pointer;
}

.upLoad {
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
  cursor: pointer;
}

.form .goodsTitle {
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  margin-bottom: 25px;
}

.form .goodsTitle ~ .goodsTitle {
  margin-top: 20px;
}

.form .goodsTitle .title {
  border-bottom: 2px solid #1890ff;
  padding: 0 8px 12px 5px;
  color: #000;
  font-size: 14px;
}

.form .goodsTitle .icons {
  font-size: 15px;
  margin-right: 8px;
  color: #999;
}

.form .add {
  font-size: 12px;
  color: #1890ff;
  padding: 0 12px;
  cursor: pointer;
}
.iview-video-style .mark {
  position: absolute;
  width: 100%;
  height: 30px;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
}
.iview-video-style .iconv {
  color: #fff;
  line-height: 180px;
  width: 50px;
  height: 50px;
  display: inherit;
  font-size: 26px;
  position: absolute;
  top: -74px;
  left: 50%;
  margin-left: -25px;
}
.form .radio {
  margin-right: 20px;
}

.form .submission {
  width: 10%;
  margin-left: 27px;
}

.form .upLoad {
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
}

.form .iconfont {
  color: #898989;
}

.form .pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 10px;
}

.form .pictrue img {
  width: 100%;
  height: 100%;
}

.Modals .address {
  width: 90%;
}

.Modals .address .iconfont {
  font-size: 20px;
}
.tip {
  margin-top: 10px;
  color: #bbb;
}
.videbox {
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 4px;
  border: 1px dashed #dddddd;
  line-height: 50px;
  text-align: center;
  color: #898989;
  font-size: 30px;
  font-weight: 400;
  cursor: pointer;
}
.progress {
  margin-top: 10px;
}
</style>
  <style scoped lang="stylus">
  .virtual_boder {
    border: 1px solid #1890FF;
  }

  .virtual_boder2 {
    border: 1px solid #E7E7E7;
  }

  .virtual_san {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 26px solid #1890FF;
    border-left: 26px solid transparent;
  }

  .virtual_dui {
    position: absolute;
    bottom: -2px;
    right: 2px;
    color: #FFFFFF;
    font-family: system-ui;
  }

  .virtual {
    width: 120px;
    height: 60px;
    background: #FFFFFF;
    border-radius: 3px;
    // border: 1px solid #E7E7E7;
    float: left;
    text-align: center;
    padding-top: 8px;
    position: relative;
    cursor: pointer;
    line-height: 23px;

    .virtual_top {
      font-size: 14px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
    }

    .virtual_bottom {
      font-size: 12px;
      font-weight: 400;
      color: #999999;
    }
  }

  .virtual:nth-child(2n) {
    margin: 0 12px;
  }

  .pictrue {
    width: 60px;
    height: 60px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    margin-right: 15px;
    display: inline-block;
    position: relative;
    cursor: pointer;

    img {
      width: 100%;
      height: 100%;
    }

    .btndel {
      position: absolute;
      z-index: 9;
      width: 20px !important;
      height: 20px !important;
      left: 46px;
      top: -4px;
    }
  }
</style>